<template>
    <div class="virtual-scroll-container">
        <Virtual :count="10000" :margin="10" :height="1000" :itemHeight="30">
            <template v-slot:default="{ topIndex, bottomIndex }">
                <div class="virtual-test">
                    <!-- :style="{top: index + 'px'} 如有间距则设置 :style="{top: index + margin间距 + 'px'} -->
                    <div class="virtual-scroll-item" v-for="(item, index) in (virtualList.slice(topIndex, bottomIndex))" :key="index" :style="{top: (index + topIndex) * (30 + 10) + 'px'}">{{ index + topIndex }}</div>
                 </div>
            </template>
        </Virtual>
    </div>
</template>

<script>
import Virtual from '@/components/Virtual.vue'
import { defineComponent, onActivated } from 'vue'
export default defineComponent({
  components: {
    Virtual
  },
  setup () {
    const virtualList = new Array(10000)
    onActivated(() => {
      console.log('进入了缓存')
    })
    return {
      virtualList
    }
  }
})
</script>
<style lang="less" scoped>
    .virtual-scroll-container {
        background-color: #000;
        // .virtual-test {
            // position: relative;
            .virtual-scroll-item {
                width: 100%;
                margin-top: 10px;
                height: 30px;
                color: #fff;
                text-align: center;
            }
        // }
    }
</style>
